<template>
  <div class="todoapp">
    <todo-header @add="addFn" :list="newList"/>
    <todo-main :list="newList" @del="delFn" />
    <todo-footer :list="newList" @change="changeFn" @clear="clearFn"/>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },

  data () {
    return {
      list: JSON.parse( localStorage.getItem('todos94') ) ||  [
        { id: 100, name: '吃饭', isDone: true },
        { id: 201, name: '睡觉', isDone: false },
        { id: 103, name: '打豆豆', isDone: true }
      ],
      status: '全部'
    }
  },

  methods: {
    delFn (id) {
      // 删掉一个数组元素，可以理解为过滤出除了这个元素以外的元素
      // 例如我要删的是100，这句话的意思就是把所有id不为100的，都过滤出来
      // 那相当于就是删了100的那条数据
      this.list = this.list.filter(v => v.id !== id)
    },

    addFn (task) {
      // 加到数组里
      this.list.push({
        id: Date.now(),
        name: task,
        isDone: false
      })
    },

    // 底部点击状态触发
    changeFn (status) {
      this.status = status
    },

    clearFn () {
      // 清空已完成就是过滤出 isDone 为false
      this.list = this.list.filter(v => !v.isDone)
    }
  },

  computed: {
    newList () {
      if (this.status === '未完成') {
        // 得到一个未完成的新数组： 特点是isDone为false
        return this.list.filter(v => !v.isDone)

      } else if (this.status === '已完成') {
        // 得到一个已完成的新数组： 特点是isDone为true
        // this.list.filter(v => v.isDone === true)

        // 就是找isDone这个值为true的过滤出来
        return this.list.filter(v => v.isDone)

      } else {
        // 返回一个全部的数组
        return this.list
      }
    }
  },

  watch: {
    list: {
      deep: true,
      handler () {
        localStorage.setItem('todos94', JSON.stringify(this.list))
      }
    }
  }
}
</script>

<style></style>
